/**
 * 该场景非固定长宽:
 *   长 200 以上即可
 *   宽 200 以上即可
 * 
 * HTML 设置方案
 * #main
 *   #ribbons (Ribbons 的 root element)
 */

import Ribbons from '../comps/ribbons/Ribbons';

class App {
  /** @type {Ribbons} */
  ribbons = null;

  constructor (context) {
    this.context = context;
  }

  init (libs) {
    // 创建 root element
    let root = document.getElementById('main');
    let content = document.createElement('div');
    content.id = 'ribbons'
    content.style.width = '100%';
    content.style.height = '100%';
    root.appendChild(content);

    this.ribbons = new Ribbons({ // 背景动效设置
      colorSaturation: "60%",
      colorBrightness: "50%",
      colorAlpha: 0.5,
      colorCycleSpeed: 5,
      verticalPosition: "random",
      horizontalSpeed: 200,
      ribbonCount: 3,
      strokeSize: 0,
      animateSections: true
    }, content);
    this.ribbons.play();
    this.ribbons.setListener((v) => this.sendStatus());
  }

  destroy () {
    let content = document.getElementById('ribbons');
    if (content) {
      content.remove();
    }
	}

  collectInfo () {
    return {
      status : this.ribbons.status(),
      option : this.ribbons._options
    };
  }

  onMessage (key, data) {
    switch (key) {
      case 'pause': {
        this.ribbons.pause();
      } return;
      case 'stop': {
        this.ribbons.stop();
      } return;
      case 'play': {
        this.ribbons.play();
      } return;
      case 'setOption': {
        this.ribbons.setOptions(data);
        this.sendStatus();
      } return;
    }

    console.log("ribbons 收到无法解析的命令: " + key);
    console.log(data);
  }

  sendStatus() {
    // 等待被覆盖
  }
}

function createScene(context) {
	let t = new App(context);
	let scene = new context.Scene({
		require : [], // none
		init : (libs) => t.init(libs),
		destroy : () => t.destroy(),
		collectInfo : () => t.collectInfo(),
		onMessage : (key, data) => t.onMessage(key, data),
	});
	t.sendStatus = scene.sendStatus;
	return scene;
}

export default createScene;